<template>
  <div class="h-87">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height:64.67%">
      <div style="width:24.18%">
        <!-- <router-link particulars class="particulars" :to="{ name: 'Fourstage', query: { code: '000101', name: 'population', typeCode: '00010102' } }"> -->
        <div data-bottom class="three-sides" style="width:100%;height:48.35%">
          <page-header :ph="186" text="人口及行政区划">
            <div class="h-100 flex flex-center">
              <div class="flex justify-between" style="width:86%;height:90%;flex-direction: column;">
                <div>
                  <div class="c-f f-14">区位面积</div>
                  <div class="number-box">
                    <span class="t-big-number">{{ peopleNumber.qwmj }}</span>
                    <span class="f-14 small-number">平方公里</span>
                  </div>
                </div>
                <div class="flex justify-between">
                  <div data-33>
                    <div class="c-f f-14">镇办数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.xzs }}</span>
                      <span class="small-number">个</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">街道办数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.xs }}</span>
                      <span class="small-number">个</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">镇数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.zs }}</span>
                      <span class="small-number">个</span>
                    </div>
                  </div>
                </div>
                <div class="flex justify-between">
                  <div data-33>
                    <div class="c-f f-14">行政村数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.xzcs }}</span>
                      <span class="small-number">个</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">社区数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.sqs }}</span>
                      <span class="small-number">个</span>
                    </div>
                  </div>
                  <div data-33>
                    <div class="c-f f-14">常住人口数</div>
                    <div class="number-box">
                      <span class="t-big-number">{{ peopleNumber.czrks }}</span>
                      <span class="small-number">万人</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </page-header>
        </div>
        <!-- </router-link> -->
        <div style="height:3.3%" />
        <div data-bottom class="three-sides" style="width:100%;height:48.35%">
          <page-header text="劳动力人口情况">
            <v-chart v-if="optionLdlrkqk.isShow" ref="ldlrkqk" :options="optionLdlrkqk" />
          </page-header>
        </div>
      </div>
      <div data-bottom class="three-center" style="padding: 2px;">
        <div id="container" style="height: 100%" />
      </div>
    </div>
    <div style="height:2.14%" />
    <div class="flex justify-between" style="height:31.29%">
      <div data-bottom class="three-sides">
        <page-header text="从业人口情况">
          <v-chart v-if="optionCyrkqk.isShow" :options="optionCyrkqk" />
        </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="从业人员学历情况">
          <v-chart v-if="optionCyxl.isShow" :options="optionCyxl" />
        </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="从业人员年龄情况">
          <v-chart v-if="optionCyry.isShow" :options="optionCyry" />
        </page-header>
      </div>
      <div data-bottom class="three-sides">
        <page-header text="农民人均年收入">
          <v-chart v-if="optionNmrjnsr.isShow" :options="optionNmrjnsr" />
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import { populationDivide, twoPieChartValue, getTowSideStat, getSingleValue } from '@/api/connector'
import PageHeader from 'header/PageHeader.vue'
import NumberImg from 'header/NumberImg.vue'
import Particulars from 'header/particulars.vue'
import echarts from 'echarts'
import AMap from '@/utils/AMap'
import { populationMap } from '@/api/connector'
import theme from '@/utils/echarts-theme.json'
import { createInfoWindow } from '@/utils/app'
import { formatNumber } from '@/utils/app'
export default {
  name: 'Population',
  components: { PageHeader, Particulars, NumberImg },
  data() {
    return {
      map: null,
      amap: '',
      infoWindow: null,
      mapData: [],
      showIndex: 0,
      time: null,
      p1: null,
      p2: null,
      peopleNumber: {},
      // 劳动力人口情况
      optionLdlrkqk: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}万人 ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          left: 10,
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '人口数及占比',
            type: 'pie',
            radius: ['55%', '75%'],
            label: {
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return params.value + ' 万人'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            data: []
          },
          {
            name: '城镇农村人口比例',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '35%'],

            label: {
              show: 'none',
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return params.value + ' 万人'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
      },
      // 从业人口情况
      optionCyrkqk: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + value + '万人' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '万人',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#AAAAAA56'
            }
          }
        },
        series: [
          {
            name: '乡村从业人员',
            type: 'bar',
            stack: '余额',
            barMaxWidth: 30,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '农林牧渔从业人员',
            type: 'bar',
            stack: '余额',
            barMaxWidth: 30,
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '农产品从业人员',
            data: [220, 453, 301, 354, 290, 330, 320],
            type: 'bar',
            stack: '余额'
          }
        ]
      },
      // 农民人均年收入
      optionNmrjnsr: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          formatter: '{a} <br/>{b}: {c}万元',
          axisPointer: {
            // type: 'cross',
            // label: {
            //   backgroundColor: '#283b56'
            // }
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['最新成交价', '预购队列']
        },
        xAxis: [
          {
            type: 'category',
            data: ['2019', '2018'],
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
          // {
          //   type: 'category',
          //   data: ['2019', '2018'],
          //   axisLine: {
          //     lineStyle: {
          //       color: '#E9F7FF',
          //       width: 1
          //     }
          //   }
          // }
        ],
        yAxis: [
          // {
          //   name: ' ',
          //   position: 'right',
          //   axisLine: {
          //     lineStyle: {
          //       color: '#E9F7FF',
          //       width: 1
          //     }
          //   }
          // },
          {
            name: '元',
            nameTextStyle: {
              color: '#ffffff'
            },
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            name: '农民人均年收入',
            type: 'bar',
            barMaxWidth: 30,
            // xAxisIndex: 1,
            // yAxisIndex: 1,
            data: [6, 7, 8, 16]
          },
          {
            name: ' ',
            type: 'line',
            data: [6, 7, 8, 15, 25]
          }
        ]
      },
      // 从业人员年龄情况
      optionCyry: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}万人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          top: 10,
          left: 0,
          textStyle: {
            color: '#fff'
          },
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
        },
        series: [
          {
            name: '从业人员年龄',
            type: 'pie',
            radius: [30, 80],
            center: ['55%', '50%'],
            roseType: 'area',
            label: {
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)';
                //   return params.value + ' 万人'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            data: []
          }
        ]
      },
      // 从业人员学历情况
      optionCyxl: {
        isShow: false,
        tooltip: {
          formatter: '{b}: {c}万人'
        },
        grid: {
          left: 0,
          top: 0,
          right: '7%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: '万人',
          nameTextStyle: {
            fontSize: '8'
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: [],
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: [
          {
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
              normal: {
                position: 'right',
                show: true
              }
            },
            data: []
          }
          // {
          //   type: 'pie',
          //   radius: [0, '30%'],
          //   center: ['75%', '24%'],
          //   data: []
          // }
        ]
      }
    }
  },
  beforeDestroy() {
    clearTimeout(this.time)
  },
  created() {
    this.init()
  },
  mounted() {
    this.$nextTick(() => {
      this.initAMap()
      this.populationMap()
      this.drawMarker()
    })
  },
  methods: {
    init() {
      populationDivide({ groupCode: 'RKJXZQH ' }).then((data) => {
        this.peopleNumber = data.body
      })
      twoPieChartValue({ groupCode: 'LDLRKQK' }).then((data) => {
        const val = data.body
        this.optionLdlrkqk.legend.data = val.names
        this.optionLdlrkqk.series[0].data = val.values.inner
        this.optionLdlrkqk.series[1].data = val.values.out
        this.optionLdlrkqk.isShow = true
        this.toLink(this, 'ldlrkqk', (params) => {
          if (params.data.name === '城镇人口总数') {
            this.$router.push({ name: 'Fourstage', query: { code: '000101', typeCode: '城镇人口数', name: 'industrial-base' }})
          }
          if (params.data.name === '农村人口总数') {
            this.$router.push({ name: 'Fourstage', query: { code: '000101', typeCode: '乡村人口数', name: 'industrial-base' }})
          }
        })
      })
      getTowSideStat({ groupCode: 'CYRKQK' }).then((data) => {
        const val = data.body
        const optionCyrkqk = this.optionCyrkqk
        optionCyrkqk.xAxis.data = val.dateSet
        optionCyrkqk.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((k, i) => {
          optionCyrkqk.series[i].data = val.typeValueListMap[(optionCyrkqk.series[i].name = k)]
        })
        optionCyrkqk.isShow = true
      })
      getTowSideStat({ groupCode: 'NMRJNSR' }).then((data) => {
        const val = data.body
        const optionNmrjnsr = this.optionNmrjnsr
        optionNmrjnsr.xAxis[0].data = val.dateSet
        // optionNmrjnsr.xAxis[1].data = ''
        optionNmrjnsr.legend.data = val.typeSet
        optionNmrjnsr.series[0].data = val.typeValueListMap[optionNmrjnsr.series[0].name]
        optionNmrjnsr.series[1].data = val.typeValueListMap[optionNmrjnsr.series[1].name]
        optionNmrjnsr.isShow = true
      })
      getSingleValue({ groupCode: 'CYRYNLQK' }).then((data) => {
        const val = data.body
        const optionCyry = this.optionCyry
        optionCyry.legend.data = val.names.map((item) => {
          return item
        })
        val.names.forEach((item, index) => {
          optionCyry.series[0].data.push({
            name: item,
            value: val.values[index]
          })
        })
        optionCyry.isShow = true
      })
      getSingleValue({ groupCode: 'CYRYXLQK' }).then((data) => {
        const val = data.body
        const optionCyxl = this.optionCyxl
        optionCyxl.yAxis.data = val.names
        // optionCyxl.legend.data = val.names
        val.names.forEach((item, index) => {
          optionCyxl.series[0].data = val.values
          // optionCyxl.series[1].data.push({
          //   name: item,
          //   value: val.values[index]
          // })
        })
        optionCyxl.isShow = true
        console.log(optionCyxl)
      })
    },
    async initAMap() {
      try {
        this.amap = await AMap()
        this.p1 = new Promise((resolve, reject) => {
          this.map = new this.amap.Map('container', {
            amapizeEnable: true, // 是否监控地图容器尺寸变化
            zoom: 14, // 初始化地图层级
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            // center: [108.096154, 34.264296] // 初始化地图中心点
            center: [108.096963, 34.263525] // 初始化地图中心点
          })
          resolve(this.map)
        })
      } catch (err) {
        console.error(err)
      }
    },
    drawMarker() {
      Promise.all([this.p1, this.p2])
        .then((result) => {
          this.addMarker(result[1])
        })
        .catch((error) => {
          // console.log(error)
        })
    },
    addMarker(data) {
      const self = this
      // 添加点
      data.map((item) => {
        const coordinate = JSON.parse(item.coordinate)
        const marker = new self.amap.Marker({
          map: self.map,
          icon: require('./../../../assets/img/map/2.png'),
          position: [coordinate.lng, coordinate.lat]
        })
        marker.on('click', function(e) {
          self.openInfo(e, item)
        })
        self.mapData.push({
          position: [coordinate.lng, coordinate.lat],
          data: item
        })
      })
      self.setMapCenter()
    },
    setMapCenter() {
      const self = this
      this.time = setTimeout(() => {
        self.map.setCenter(self.mapData[self.showIndex].position)
        const lnglat = JSON.parse(self.mapData[self.showIndex].data.coordinate)
        self.openInfo({ lnglat }, self.mapData[self.showIndex].data)
        if (self.showIndex === self.mapData.length - 1) {
          self.showIndex = 0
        } else {
          self.showIndex++
        }
        self.setMapCenter()
      }, 8000)
    },
    openInfo(e, item) {
      const self = this
      const title = '详情'
      const content = []
      content.push('<div id="mapEcharts"></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)

      setTimeout(() => {
        echarts.registerTheme('themes', theme)
        const myChart = echarts.init(document.getElementById('mapEcharts'), 'themes')
        const option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
            formatter: function(params, ticket, callback) {
              var htmlStr = ''
              for (var i = 0; i < params.length; i++) {
                var param = params[i]
                var xName = param.name // x轴的名称
                var seriesName = param.seriesName // 图例名称
                var value = param.value // y轴值
                var color = param.color // 图例颜色
                if (i === 0) {
                  htmlStr += xName + '<br/>' // x轴的名称
                }
                htmlStr += '<div>'
                htmlStr +=
                  '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
                  color +
                  ';"></span>' // 一个点

                htmlStr += seriesName + '：' + formatNumber(value[seriesName]) + (seriesName === '人均收入' ? '元' : '人') // 圆点后面显示的文本
                htmlStr += '</div>'
              }
              return htmlStr
            }
          },
          dataset: {
            dimensions: ['product', '人口数量', '农林牧渔从业人员数', '人均收入'],
            source: [{ product: item.year, 人口数量: item.number, 农林牧渔从业人员数: item.agriForestryNum, 人均收入: item.perCapitaIncome }]
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            }
          },
          yAxis: [
            {
              name: '人',
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              }
            },
            {
              name: '元',
              axisLine: {
                lineStyle: {
                  color: '#E9F7FF',
                  width: 1
                }
              }
            }
          ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '30%',
            containLabel: true
          },
          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar', yAxisIndex: 1 }]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
      }, 100)
    },
    populationMap(item) {
      this.p2 = new Promise((resolve, reject) => {
        populationMap().then((res) => {
          resolve(res.body.data)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.three-center {
  width: 74.73%;
  height: 100%;
  background-size: 100% 100% !important;
}
.three-sides {
  width: 24.18%;
  height: 100%;
  background-size: 100% 100% !important;
}
.three-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.three-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.three-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.three-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.people-line {
  height: 38px;
  display: flex;
  align-items: center;
  span:first-child {
    color: #fff;
    font-size: 14px;
  }
  span:last-child {
    color: #27befb;
    font-size: 14px;
  }
}
.t-big-number {
  font-size: 28px;
  font-family: Myfont;
  font-weight: bold;
  text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(60, 181, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
}

.small-number {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(188, 221, 242, 1);
  margin-left: 6px;
}
.number-box {
  display: flex;
  align-items: center;

}
div[data-33]{
  width: 33%;
}
</style>
